<template>
  <view class="waterNeed">
    <nav-bar title="需水信息" leftArrow>
      <template #right>
        <van-button @click="goLink('created')" icon="plus" plain type="primary" size="small">需水上报</van-button>
      </template>
    </nav-bar>
    <van-tabs v-model:active="active" title-active-color="#1989fa" @click="onTabClick">
      <van-tab v-for="tab in tabList" :title="tab.title" :name="tab.value"></van-tab>
    </van-tabs>

    <view class="waterNeed-card">
      <view class="waterNeed-card-title">需水研判</view>
      <view class="waterNeed-card-cont">
        <view class="waterNeed-card-item">
          <view class="waterNeed-card-item-title">{{ demandSum.areaDemand || '0' }}</view>
          <view class="waterNeed-card-item-desc">需水总面积(万亩)</view>
        </view>
        <view class="waterNeed-card-item">
          <view class="waterNeed-card-item-title">{{ demandSum.waterDemand || '0' }}</view>
          <view class="waterNeed-card-item-desc">需水总量(万m³)</view>
        </view>
      </view>
      <view class="waterNeed-card-icon"></view>
    </view>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        class="universal-list-list"
      >
        <van-cell v-for="item in list" :key="item">
          <view class="universal-list-item" @click.stop="goLink('detail', item)">
            <view class="universal-list-head">
              <view class="universal-list-title">{{ item.projectItemName }}</view>
              <view class="universal-list-status">{{item.reportNo}}</view>
            </view>
            <view class="universal-list-main">
              <view class="universal-list-detail">
                <view class="universal-list-detail-title">需水面积：</view>
                <view class="universal-list-detail-cont">{{ item.areaDemand }}亩</view>
              </view>
              <view class="universal-list-detail">
                <view class="universal-list-detail-title">预计需水量：</view>
                <view class="universal-list-detail-cont">{{ item.waterDemand }}m³</view>
              </view>
              <view class="universal-list-detail">
                <view class="universal-list-detail-title">上报人：</view>
                <view class="universal-list-detail-cont">{{ item.createName || '-' }}</view>
              </view>
              <view class="universal-list-detail">
                <view class="universal-list-detail-title">上报时间：</view>
                <van-text-ellipsis class="universal-list-detail-cont" :content="item.reportTime" />
              </view>
            </view>
            <view class="universal-list-footer">
              <view class="universal-list-footer-tag">来源：{{ item.reportSource ? item.reportSource.label : '-' }}</view>
              <view class="universal-list-footer-button">
                记录<van-icon name="arrow" />
              </view>
            </view>
          </view>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </view>
</template>

<script setup>
  import dayjs from 'dayjs';
  import { ref } from 'vue';
  import { apiWaterNeedList, apiWaterNeedSum, apiWaterNeedSumAuto } from '@/api/waterNeed';

  const active = '0';
  const tabList = [
    {
      title: '人工上报',
      value: 0,
    },
    {
      title: '系统上报',
      value: 1,
    },
  ];
  let list = ref([]);
  const demandSum = ref({});

  const refreshing = ref(false);
  const loading = ref(false);
  const finished = ref(false);

  const getWaterNeedList = () => {
    apiWaterNeedList({
      pageSize: 100,
      pageNum: 1,
    }).then(res => {
      list.value = res.data;
      finished.value = true;
      refreshing.value = false;
    })
  }

  const onLoad = () => { 
    getWaterNeedList();
  };
  const onRefresh = () => {
    getWaterNeedList();
  };
  const goLink = (type, options) => {
    if (type === 'created') {
      uni.navigateTo({ url: '/pages/waterNeed/created' })
    } else if (type === 'detail') {
      uni.navigateTo({ url: `/pages/waterNeed/record?id=${options.demandId}` })
    }
  };
  const getSum = () => {
    apiWaterNeedSum().then(res => {
      const data = res || {}
      demandSum.value = {
        areaDemand: data.areaDemand,
        waterDemand: data.waterDemand,
      }
    })
  };
  const getSumAuto = () => {
    apiWaterNeedSumAuto().then(res => {
      const data = res || {}
      demandSum.value = {
        areaDemand: data.areaDemand,
        waterDemand: data.waterDemand,
      }
    })
  };
  const onTabClick = ({ name }) => {
    name === 0 ? getSum() : getSumAuto();
  }
  getSum();
</script>

<style lang="scss" scoped>
@import "@/assets/universal-list.scss";
.waterNeed {
  &-card {
    margin: 30rpx;
    padding: 30rpx;
    background: linear-gradient(#eff7ff, #fff);
    border-radius: 10rpx;
    position: relative;
    overflow: hidden;
    &-icon {
      position: absolute;
      width: 240rpx;
      height: 240rpx;
      right: -50rpx;
      top: -120rpx;
      background: url("/static/water.png") no-repeat 0 0;
      background-size: contain;
      opacity: 0.1;
    }
    &-title {
      height: 80rpx;
      color: #333;
      font-size: 30rpx;
      font-weight: bold;
    }
    &-cont {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    &-item {
      flex: 1;
      text-align: center;
    }
    &-item-title {
      height: 80rpx;
      color: #000;
      font-size: 72rpx;
      font-weight: 800;
    }
    &-item-desc {
      font-size: 24rpx;
      color: #666;
    }
  }
}
</style>